<template>
   <section>
     <van-nav-bar title="完善货物信息" fixed
        @click-left="onClickLeft"
        @click-right="onClickRight">
          <van-icon name="arrow-left" slot="left" color="#333" size="0.6rem"/>
          <van-icon :name="require('@/assets/img/computer.png')" slot="right" color="#333" size="0.6rem"/>
      </van-nav-bar>
      <div class="container" style="height:100%;">
        <div class="sub">
          <van-field
            v-model="goods.KaGoodName"
            rows="1"
            autosize
            label="请填写货物名称"
            type="textarea"
            maxlength="10"
            placeholder="请输入"
            show-word-limit
            size="large"
            required
            label-width="3.1rem"
            input-align="right"
          />
          <van-cell title="该品类总件数/件" integer size="large" required>
            <van-stepper v-model="goods.KaQuantity"  />
          </van-cell>
          <van-cell title="该品类总重量/千克" size="large" required>
            <van-stepper v-model="goods.KaWeightKg"  />
          </van-cell>
          <van-cell title="该品类总体积" size="large">
            <van-stepper v-model="goods.KaVolume" integer />
          </van-cell>
          <van-cell title="该品类总特性" size="large">
            <div class="tag-items">
              <div class="tag-item van-hairline--surround" :class="goods.Pressurable===1?'active':''" @click="onChangePre">
                不可压
              </div>
              <div class="tag-item van-hairline--surround" :class="goods.Fragile===2?'active':''" @click="onChangeFra">
                易碎品
              </div>
            </div>
          </van-cell>
          <van-cell title="上传照片" size="large">
            <div style="padding:10px 0;">
              <van-uploader v-model="fileList"
              :before-read="asyncBeforeRead"
              :before-delete="beforeDelete"
              :max-count="1" multiple preview-size="1.6rem"/>
            </div>

          </van-cell>
        </div>
      </div>

      <div class="phone">
        <van-icon name="phone" color="#F18D00" size="0.6rem"/>
        <span>400-007-5656</span>
      </div>
      <div class="footer">
        <div class="footer-btn" @click="handelSaveGood">
          确定
        </div>
      </div>
   </section>
</template>

<script>
import Vue from 'vue';
import { Uploader } from 'vant';

import { compressor } from '@/utils/utils';
Vue.use(Uploader);
const datas = {
        Fragile: 0,
        KaGoodName: '',
        insideRemark: null,
        kaAlien: 0,
        KaGoodId: '',
        KaGoodPackage: 1,
        KaGoodValue: null,
        kaHigh: null,
        kaLong: null,
        KaOrderId: '',
        KaQuantity: 1,
        KaStatus: 1,
        KaUnit: 0,
        KaVolume: 1,
        KaWeightKg: 1,
        kaWidth: null,
        KaGoodPicture: '',
        Pressurable: 0,
        standard: 1
      };

export default {
  data() {
    return {
      fileList: [],
      uploadImg:[], // 已上传图片数组
      goods: JSON.parse(JSON.stringify(datas)),
      edit:'new'
    };
  },
  mounted() {
    this.edit = this.$route.query.edit;
    if (this.edit!='new') {
      let data = sessionStorage.getItem('bd-h5-selectgood');

      this.goods = data?JSON.parse(data).kaGoodsTypeList[parseInt(this.edit)]: JSON.parse(JSON.stringify(datas));
    } else {
      this.goods = JSON.parse(JSON.stringify(datas));
    }
    if (this.goods&&this.goods.KaGoodPicture) {
      this.uploadImg.push(this.goods.KaGoodPicture);
      this.fileList.push({url:`https://${this.goods.KaGoodPicture}`});
    }
    console.log(this.goods);
  },
  watch: {

  },
  methods: {
    handelSaveGood(){
      let data = sessionStorage.getItem('bd-h5-selectgood')||[];

      if (data) {
        data = JSON.parse(data);
      } else {
        data = [];
      }
      this.goods.KaGoodPicture = this.uploadImg.join(',');

      if (this.edit!='new') {
        data.kaGoodsTypeList[this.edit] = this.goods;
      } else {
        data.kaGoodsTypeList.push(this.goods);
      }
      this.goods = JSON.parse(JSON.stringify(datas));
      sessionStorage.setItem('bd-h5-selectgood',JSON.stringify(data));
      this.$router.back();
    },
    asyncBeforeRead(file,detail){
      return new Promise((resolve, reject) => {
        console.log(file);
        compressor(file)
        .then(res => {
          // this.parm.imageAddress = "https://"+res
          console.log(detail);
          this.uploadImg.push(`${res}`);
          resolve();
        })
        .catch(error => {
          // 上传失败
          reject();
          this.$toast.fail(error);
        });
      });
    },
    beforeDelete(file,detail){
      this.uploadImg.splice(detail.index,1);
      return true;
    },
    onChangePre(){
      this.goods.Pressurable===1?this.goods.Pressurable=2:this.goods.Pressurable=1;
    },
    onChangeFra(){
      this.goods.Fragile===2?this.goods.Fragile=1:this.goods.Fragile=2;
    },
    onClickLeft() {
      this.$router.back();
    },
    onClickRight () {
       let url = window.location.host;

      let index = url.indexOf('pre');

     if (index<=-1) {
          window.location.href ='https://ka.lecarlink.com/index.aspx';
      } else {
          window.location.href = 'https://ka-pre.lecarlink.com/index.aspx';
      }
    }
  },
  components: {

  }
};
</script>

<style scoped lang='scss'>
.container{
  background: #F8F8F8;
  padding: 56px 15px 74px 15px;
  font-size: 16px;
  .sub{
    background: #FFFFFF;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
    border-radius: 4px;
    .tag-items{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .tag-item{
        width: 54px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        &.active{
          background: #F18D00;
          color: #fff;
        }
      }
      :first-child{
        margin-right: 10px;
      }
    }
  }
}
.phone{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 74px;
  color: #F18D00;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  height: 64px;
  .footer-btn{
    background: #F18D00;
    border-radius: 4px;
    height: 44px;
    line-height: 44px;
    margin: 10px 15px;
    font-size: 18px;
    text-align: center;
    color: #fff;
  }
}
</style>
